<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue-2.4.0.js"></script>
  </head>
  <body>
    <div id="aa">
      <button @click="start()" :disabled="timer">开始</button>
      <button @click="start1()" :disabled="!timer">暂停</button>
      <h1>{{domo}}</h1>
    </div>
  </body>
  <script>
    let ve = new Vue({
      el: "#aa",
      data: {
        domo: "猥琐发育别浪···",
        timer: null,
        // disabled: false,
      },
      methods: {
        start() {
          //   this.disabled = true;
          this.timer = setInterval(() => {
            let too = this.domo.substr(0, 1);
            let too1 = this.domo.substr(1);
            this.domo = too1 + too;
          }, 500);
        },
        start1() {
          clearInterval(this.timer);
          this.timer = null;
        },
      },
    });
  </script>
</html>
